<template>
  <div>
    <template v-if="listData.length">
      <el-row :gutter="24">
        <el-col class="mb20" v-for="(item,index) in listData" :key="index" :span="8">
          <el-card shadow="never" class="list-card">
            <div slot="header" class="tl-center">
              <span>{{item.planName}}</span>
              <el-tooltip class="item fr fs16" effect="dark" content="详情" placement="top">
                <i
                  @click="handleDetail(item)"
                  v-if="$auth('assets:detail')"
                  class="el-icon-document"
                ></i>
              </el-tooltip>
              <el-tooltip
                v-if="item.planState !== 3"
                class="item fr mr10 fs16"
                effect="dark"
                content="终止"
                placement="top"
              >
                <i @click="handlePause(item)" class="el-icon-switch-button"></i>
              </el-tooltip>
              <el-tooltip
                class="item fr mr10 fs16"
                v-if="item.schedule === 0 && $auth('assets:delete')"
                effect="dark"
                content="删除"
                placement="top"
              >
                <i @click="handleDelete(item)" class="el-icon-delete red"></i>
              </el-tooltip>
            </div>
            <el-form label-width="100px">
              <el-form-item label="计划类型">
                <span>{{ item.planType && item.planType === 1 ? '区域' : '部门' }}</span>
              </el-form-item>

              <el-form-item label="计划日期">
                <span>{{ item.beginDate ? `${item.beginDate}至${item.endDate}` : null }}</span>
              </el-form-item>
              <el-form-item label="计划状态">
                <span>
                  <el-tag
                    :type="judgeColor(item.planState)"
                    size="small"
                  >{{ item.planState | judgeState }}</el-tag>
                </span>
              </el-form-item>
              <el-form-item label="盘点人数">{{ item.pcount }}</el-form-item>
              <el-form-item label="盘点资产数">{{ item.acount }}</el-form-item>
              <el-form-item label="盘点进度">
                <span>
                  <el-progress
                    :text-inside="true"
                    color="#52c41a"
                    :percentage="Math.floor(item.schedule)"
                    :stroke-width="20"
                    style="margin-top:11px"
                  />
                </span>
              </el-form-item>
              <el-form-item label="审核人">{{ item.reviewUser }}</el-form-item>
              <el-form-item label="审核进度">
                <span>
                  <el-progress
                    :text-inside="true"
                    color="#52c41a"
                    :percentage="Math.floor(item.reviewProgress)"
                    :stroke-width="20"
                    style="margin-top:11px"
                  />
                </span>
              </el-form-item>
              <el-form-item label="创建人">
                <span>{{item.createUser}}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ formatTime(item.createTime) }}</span>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col class="tl-center nomoreWord" v-show="noMore">---- 这是我的底线 ----</el-col>
      </el-row>
    </template>
    <template v-else>
      <empty-comp ref="emptyComp" />
    </template>
  </div>
</template>

<script>
import { checkPlanAll, checkPlanDelete, checkState } from '@/api/assetsNew'
import { judgeColor, openNotification } from '@/utils/util'

export default {
  data() {
    return {
      headStyle: { textAlign: 'center' },
      listData: [],
      queryParam: {
        pageSize: 10,
        pageNo: 1
      },
      total: 1,
      noMore: false
    }
  },
  filters: {
    judgeState(num) {
      let str = ''
      switch (num) {
        case 0:
          str = '正常'
          break
        case 1:
          str = '结束'
          break
        case 2:
          str = '过期'
          break
        case 3:
          str = '终止'
          break
        default:
          break
      }
      return str
    }
  },
  mounted() {
    this.getPlanList()
    window.addEventListener('scroll', this.getScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.getScroll)
  },
  methods: {
    getScroll() {
      if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
        this.loadMore()
      }
    },
    loadMore() {
      if (this.queryParam.pageNo * 10 > this.total) {
        this.noMore = true
      } else {
        this.queryParam.pageNo += 1
        this.getPlanList(this.queryParam)
      }
    },
    judgeColor(num) {
      return judgeColor(num)
    },
    getPlanList(param = { startTime: null, endTime: null }) {
      this.queryParam = Object.assign(this.queryParam, param)
      checkPlanAll(this.queryParam).then(res => {
        if (this.queryParam.pageNo === 1) {
          this.listData = []
          this.listData = [...res.data.records]
        } else {
          this.listData = [...this.listData, ...res.data.records]
        }
        if (this.queryParam.pageNo * 10 > this.total) {
          this.noMore = true
        }
      })
    },
    handleDetail(obj) {
      this.$router.push({
        name: 'assetsPlanDetail',
        params: { obj }
      })
    },
    handleDelete(row) {
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除[${row.planName}]这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          const res = await checkPlanDelete(row.planId, {})
          openNotification('success', '删除成功')
          const index = _this.listData.findIndex(v => v.planId === row.planId)
          _this.listData.splice(index, 1)
        }
      })
    },
    handlePause(row) {
      const _this = this
      this.$confirm({
        title: '终止操作',
        content: `您确定终止[${row.planName}]这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          const res = await checkState({ planId: row.planId })
          if (res.state === '000000') {
            openNotification('success', '终止计划成功')
            const index = _this.listData.findIndex(v => v.planId === row.planId)
            _this.$set(_this.listData[index], 'planState', 3)
            _this.getPlanList()
          }
        }
      })
    },
    handleEdit(bool, obj) {
      this.$router.push({
        name: 'assetsTaskEdit',
        params: { obj, bool }
      })
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 2px;
}

.tl-center .item {
  cursor: pointer;
}
</style>